<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
            <el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
                <section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
                    <section style="flex: 1;height: inherit;overflow-y: auto;">
                        <section class="font16 px10 pl20 borderRadius5 mb20" style="background:var(--el-color-primary-light-9);">
                            <p> {{  route.query.status == 'edit' ? '协议编辑' : '协议新增' }}</p>
                        </section>
                        <el-form class="pb20" ref="ruleFormRef" :rules="rules" :model="state.param" label-width="180px">
                            <el-form-item label="协议分类：" prop="categoryIds">
                                <el-cascader class="width450" v-model="state.param.categoryIds"
                                    placeholder="请选择上级分类" :options="state.productCategoryList"
                                    :props="{ label: 'text', value: 'id', children: 'children',checkStrictly: true}" />
                            </el-form-item>
                            <el-form-item label="协议图标：" prop="promiseUrl">
                                <section>
                                    <el-image v-if="state.param.promiseUrl != ''" class="mr20" :preview-src-list="[state.param.promiseUrl]"
                                        style="width:64px; height: 64px;border-radius: 5px;" :src="state.param.promiseUrl" fit="cover" />
                                    <section v-else class="selector-img" @click="addImg('promiseUrl', 0)">
                                        <el-icon size="30" color="#999">
                                            <ele-Plus />
                                        </el-icon>
                                    </section>
                                </section>
                            </el-form-item>
                            <el-form-item label="协议名称：" prop="promiseName">
                                <el-input v-model="state.param.promiseName" class="width450" placeholder="请输入商品名称" />
                            </el-form-item>
                            <el-form-item label="作者名称：" prop="author">
                                <el-input v-model="state.param.author" class="width450" placeholder="请输入商品名称" />
                            </el-form-item>
                            <el-form-item label="是否启用：">
                                <el-switch v-model="state.param.isEnable"  :active-value=1 :inactive-value=0 />
                            </el-form-item>
                            <el-form-item label="文章简介：">
                                <el-input v-model="state.param.promiseIntro" class="width450"
                                    :rows="3" type="textarea" placeholder="请输入文章简介" />
                            </el-form-item>
                            <el-form-item label="协议内容：" prop="textVal">
                                <section style="max-width: 1400px;">
                                    <Editor height="360px" v-model:get-html="state.param.promiseInfo" v-model:get-text="state.param.textVal" />
                                </section>
                            </el-form-item>
                        </el-form>
                    </section>
                    <section style="text-align: center; margin:10px 0;">
                        <el-button type="primary" @click="submitFun(ruleFormRef)">保 存</el-button>
                    </section>
                </section>
            </el-card>
        </div>
        <AddInformation ref="addInformationRef" @selectFun="selectFun" />
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { productCategoryList } from "/@/api/commodity";
import { articleDetails, articleDelete,articleAdd} from '/@/api/common';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute ,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>()
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const addInformationRef = ref()
// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
// 定义变量内容
const state = reactive({
    param:{
        promiseId:null,
        promiseType: 0,
        categoryIds: [],
        promiseIntro:'',
        promiseName:'',
        promiseUrl: '',
        author: '',
        isEnable: 0,
        promiseInfo: '',
        textVal:'',
    },
    // 分类list
    productCategoryList: [] as Array<any>,
});


const rules = reactive<FormRules<any>>({
	categoryIds: [{ required: true, message: '请选择文章分类', trigger: 'change' }],
	promiseUrl: [{ required: true, message: '请上传协议图标', trigger: 'blur' }],
	promiseName: [{ required: true, message: '请输入文章名称', trigger: 'change' }],
	author: [{ required: true, message: '请输入作者名称', trigger: 'blur' }],
    textVal: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
})

// 获取协议分类
const getCategoryList = async () => {
    // 创建一个新的对象  
    const { results } = await productCategoryList({ platformType: 2 });
    state.productCategoryList = results
}

// 图片选中
const addImg = (type: string, isArr: Number) => {
	addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
	state.param.promiseUrl = fileList[0]
}


const submitFun =  async (formEl: FormInstance | undefined) => {
    if (!formEl) return
	await formEl.validate( async (valid, fields) => {
		if (valid) {
            const {method} = await articleAdd(state.param);
            if(method == 'success'){
                ElMessage.success('提交成功');
                router.go(-1)
            }
		} else {
			console.log('error submit!', fields)
		}
	})
   

}
// 页面加载时
onMounted(async() => {
    if (route.query.status == 'edit') {
		// 获取商品数据
		const { results } = await articleDetails({promiseId:route.query.id});
        state.param.promiseId = results.records[0].promiseId
        state.param.promiseType = results.records[0].promiseType
        state.param.categoryIds = results.records[0].categoryIds
        state.param.promiseIntro = results.records[0].promiseIntro
        state.param.promiseName = results.records[0].promiseName
        state.param.promiseUrl = results.records[0].promiseUrl
        state.param.author = results.records[0].author
        state.param.isEnable = results.records[0].isEnable
        state.param.promiseInfo = results.records[0].promiseInfo
    }else{
        state.param.promiseId = null;
        state.param.promiseType = 1;
        state.param.categoryIds = [];
        state.param.promiseIntro = '';
        state.param.promiseName = '';
        state.param.promiseUrl ='';
        state.param.author = '';
        state.param.isEnable = 0
        state.param.promiseInfo = '';
    }
	getCategoryList();
});

</script>
<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
}
.selector-img {
    width: 64px;
    height: 64px;
    border: 1px solid #ededed;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
        background-color: #f5f5f5;
        border: 1px solid #e4e3e3;
    }
}
</style>


